<template>
  <el-card shadow="never" :class="[{ mb: mbottom }, { pd: pbottom }]" :body-style="{ 'font-size': `${fontSize}px` }" v-loading="loading">
    <template #header v-if="header != ''">
      <div class="header">
        <strong>{{ header }}</strong>
        <slot name="button"></slot>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<script setup lang="ts">
defineProps({
  /**
   * 是否增加一个16px的margin-bottom
   */
  mbottom: { type: Boolean, default: false },
  /**
   * 是否需要下内边框
   */
  pbottom: { type: Boolean, default: false },
  /**
   * 组件加载状态
   */
  loading: Boolean,
  header: { type: String, default: '' }, // 是否显示header，并且操作
  fontSize: { type: Number, default: 14 } // 字体大小
})
</script>

<style lang="scss" scoped>
.mb {
  margin-bottom: 1rem;
}

.pd {
  &:deep(.ep-card__body) {
    padding: 20px 20px 0 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
